<template>
  <div v-loading="loading">
    <el-row :gutter="24" style="padding: 5px 20px">
      <el-col :span="21">
        <el-button type="info" icon="el-icon-back" @click="goBack">返回</el-button>
      </el-col>
      <el-col :span="3">
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
          <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
        </el-button-group>
      </el-col>
    </el-row>
    <el-card style="min-height: 600px;" size="60%">
      <el-descriptions border>
        <el-descriptions-item label="方案名称" label-style="width:8%" content-style="width:20%">{{ quality.projectName }}</el-descriptions-item>
        <el-descriptions-item label="方案描述" :span="2" label-style="width:8%" content-style="width:60%">{{ quality.projectDescribe }}</el-descriptions-item>
        <el-descriptions-item label="产品编码" label-style="width:8%" content-style="width:23%">{{ quality.cinvcode }}</el-descriptions-item>
        <el-descriptions-item label="产品名称" label-style="width:8%" content-style="width:23%">{{ quality.cinvname }}</el-descriptions-item>
        <el-descriptions-item label="产品规格" label-style="width:8%" content-style="width:23%">{{ quality.cinvstd }}</el-descriptions-item>
        <el-descriptions-item label="明细单号" label-style="width:8%" content-style="width:23%">{{ quality.modid }}</el-descriptions-item>
        <el-descriptions-item label="部门名称" label-style="width:8%" content-style="width:23%">{{ quality.cdepname }}</el-descriptions-item>
        <el-descriptions-item label="生产单号" label-style="width:8%" content-style="width:23%">{{ quality.mocode }}</el-descriptions-item>
        <el-descriptions-item label="质检等级" label-style="width:8%" content-style="width:23%">{{ quality.level }}</el-descriptions-item>
        <el-descriptions-item label="质检水准" label-style="width:8%" content-style="width:23%">{{ quality.grade }}</el-descriptions-item>
        <el-descriptions-item label="抽检数量" label-style="width:8%" content-style="width:23%">{{ quality.qc }}</el-descriptions-item>
        <el-descriptions-item label="最小失败" label-style="width:8%" content-style="width:23%">{{ quality.ac }}</el-descriptions-item>
        <el-descriptions-item label="最大失败" label-style="width:8%" content-style="width:23%">{{ quality.re }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" label-style="width:8%" content-style="width:23%">{{ quality.createTime }}</el-descriptions-item>
        <el-descriptions-item label="创建人" label-style="width:8%" content-style="width:23%">{{ quality.createBy }}</el-descriptions-item>
        <el-descriptions-item label="总检" label-style="width:8%" content-style="width:23%">{{ quality.measurement }}</el-descriptions-item>
      </el-descriptions>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="质检内容" name="质检内容">
          <el-table
            :data="quality.entitys"
            tooltip-effect="dark"
            border
            style="width: 100%;"
          >
            <el-table-column
              type="index"
              label="项次"
              width="50"
            />
            <el-table-column
              prop="planName"
              width="150px"
              label="测试项目"
            />
            <el-table-column
              prop="quotaName"
              width="150px"
              label="测试指标"
            />
            <el-table-column
              prop="specs"
              width="150px"
              label="规格"
            />
            <el-table-column
              v-if="quality.qc>=1"
              prop="no1"
              width="120px"
              label="NO.1"
            />
            <el-table-column
              v-if="quality.qc>=2"
              prop="no2"
              width="120px"
              label="NO.2"
            />
            <el-table-column
              v-if="quality.qc>=3"
              prop="no3"
              width="120px"
              label="NO.3"
            />
            <el-table-column
              v-if="quality.qc>=4"
              prop="no4"
              width="120px"
              label="NO.4"
            />
            <el-table-column
              v-if="quality.qc>=5"
              prop="no5"
              width="120px"
              label="NO.5"
            />
            <el-table-column
              prop="judge"
              width="90px"
              label="系统"
            />
            <el-table-column
              prop="result"
              width="110px"
              label="人工"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="图片" name="图片">
          <el-card v-for="(item,index) in quality.images" :key="index" style="height: 200px;width: 200px;float: left">
            <el-image :key="item.id" :src="fileURL+item.imgUrl" :preview-src-list="[fileURL+item.imgUrl]" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="审核记录" name="审核记录">
          <el-timeline>
            <el-timeline-item v-for="item of workflowResults" :key="item.id" :timestamp="item.createTime" placement="top">
              <el-card :body-style="{padding:'8px 8px'}">
                <div><bold style="color: #409EFF">{{ item.createBy }}</bold>:<bold :style="{color: item.judge === '不同意'?'red' : 'green'}">{{ item.judge }}</bold></div>
                <el-divider />
                <p style="margin-left: 20px">备注：{{ item.remark }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-card>
            <el-form ref="form" :model="form" :inline="true">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" style="width: 600px" />
              </el-form-item>
              <el-form-item v-if="workflow.userType === '质量总监'" label="处理方式">
                <el-select v-model="form.result" placeholder="请选择">
                  <el-option
                    v-for="item in handles"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="判断结果" prop="judge">
                <el-switch
                  v-model="form.judge"
                  active-color="#13ce66"
                  active-value="同意"
                  inactive-value="不同意"
                  inactive-color="#ff4949"
                />
                {{ form.judge }}
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="saveResult">保存</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { get } from '@/api/workflow'
import { getNext } from '@/api/workflow'
import { getLast } from '@/api/workflow'
import { save } from '@/api/workflowresult'
export default {
  name: 'WorkflowEdit',
  data() {
    return {
      handles: ['特采', '退货', '加工'],
      loading: false,
      dialogVisible: false,
      form: {},
      rules: [],
      drawer: true,
      fileURL: process.env.VUE_APP_BASE_API,
      activeName: '审核记录',
      quality: {},
      workflowResults: [],
      workflow: {}
    }
  },
  created() {
    this.getQuality(this.$route.query.id)
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getQuality(id) {
      this.loading = true
      get(id).then(res => {
        this.loading = false
        this.workflow = res.data.data
        this.quality = res.data.data.qcProduce
        this.form.refId = this.workflow.id
        this.form.workNode = this.workflow.workNode
        this.workflowResults = res.data.data.list
      })
    },
    goBack() {
      this.$router.push({ path: 'workflowIndex' })
    },
    toNext() {
      getNext(this.$route.query.id).then(res => {
        this.$router.push({ path: 'qcProduceView', query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getQuality(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id).then(res => {
        this.$router.push({ path: 'qcProduceView', query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getQuality(this.$route.query.id)
        }
      })
    },
    handleEdit() {
      this.form.refId = this.workflow.id
      this.form.workNode = this.workflow.workNode
      this.dialogVisible = true
    },
    saveResult() {
      this.loading = true
      save(this.form).then(res => {
        this.getQuality(this.$route.query.id)
        this.loading = false
        this.$message.success('保存成功')
        this.dialogVisible = false
      })
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
</style>
